<template>
  <div>
    <el-button @click="add" type="primary" v-if="certStage === 1">新增指标</el-button>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" width="180" type="index"> </el-table-column>
      <el-table-column prop="firstLevelPoint" label="一级指标">
      </el-table-column>
      <el-table-column prop="secondLevelPoint" label="二级指标">
      </el-table-column>
      <el-table-column prop="pointDesc" label="指标描述"> </el-table-column>
      <el-table-column label="操作" v-if="isSubmit">
        <template slot-scope="scope">
          <el-button type="text" @click="getCertInfo(scope.row.id, false)"
            >编辑</el-button
          >
          <el-button type="text" @click="getCertInfo(scope.row.id, true)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form label-width="100px" :model="formData" ref="formRef" :rules="rules">
        <el-form-item label="一级指标" prop="firstLevelPoint">
          <el-col :span="10">
            <el-input v-model="formData.firstLevelPoint" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="二级指标" prop="secondLevelPoint">
          <el-col :span="10">
            <el-input v-model="formData.secondLevelPoint" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="指标描述" prop="pointDesc" >
          <el-col :span="10">
            <el-input
              v-model="formData.pointDesc"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              :disabled="isEdit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="达成情况概述" prop="achieveSummary">
          <el-col :span="10">
            <el-input
              v-model="formData.achieveSummary"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              :disabled="isEdit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="主要问题" prop="mainQuestion">
          <el-col :span="10">
            <el-input
              v-model="formData.mainQuestion"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              :disabled="isEdit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="改进措施" prop="improveMethod">
          <el-col :span="10">
            <el-input
              v-model="formData.improveMethod"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              :disabled="isEdit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上传文件" prop="reach">
          <el-col :span="10">
            <ossUpload @setCertAttachmentId="setCertAttachmentId" ref="ossRef" :isdisabled="isEdit"></ossUpload>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" v-if="!isEdit">取 消</el-button>
        <el-button type="primary" @click="save" v-if="!isEdit">{{
          isEdit ?  "提交修改" : "保存"
        }}</el-button>
      </span>
    </el-dialog>
    <el-pagination
      v-if="tableData.length > 0 && isSubmit"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-row type="flex" justify="center" style="margin-top:20px">
        <el-col :span="4">
         <el-button @click="submit" type="primary" class="submitBtn" v-if="certStage === 1">提 交</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import ossUpload from "../../../components/ossUpload.vue"
export default {
  components: {
    ossUpload
  },
  data() {
    return {
      tableData: [],
      formData: {
        achieveSummary: "", // 达成情况描述
        certAttachmentId: 1, //
        firstLevelPoint: "", // 一级指标
        improveMethod: "", // 改进措施
        mainQuestion: "", // 主要问题
        pointDesc: "", // 指标描述
        secondLevelPoint: "" // 二级指标
      },
      dialogVisible: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      isSubmit: false,
      isEdit: false,
      isView: false,
      rules: {
        firstLevelPoint: [{ required: true, message: '请输入一级指标', trigger: 'blur' }],
        secondLevelPoint: [{ required: true, message: '请输入二级指标', trigger: 'blur' }],
        pointDesc: [{ required: true, message: '请输入指标描述', trigger: 'blur' }],
        achieveSummary: [{ required: true, message: '请输入达成情况概述', trigger: 'blur' }],
        mainQuestion: [{ required: true, message: '请输入主要问题', trigger: 'blur' }],
        improveMethod: [{ required: true, message: '请输入改进措施', trigger: 'blur' }],
      },
      totalPage: 0
    };
  },
  props: {
    certStatus: '',
    active: '',
    certStage: ''
  },
  created() {
    this.getCert();
  },
  methods: {
     // 每页数
      sizeChangeHandle (val) {
        this.page.pageSize = val
        this.page.pageNum = 1
        this.getCert()
      },
      // 当前页
      currentChangeHandle (val) {
        this.page.pageNum = val
        this.getCert()
      },
    add() {
      this.dialogVisible = true;
    },
    cancel() {
      Object.keys(this.formData).forEach(key => (this.formData[key] = ""));
      this.isView=false
      this.dialogVisible = false;
    },
    setCertAttachmentId(val) {
      this.formData.certAttachmentId = val
    },
    save() {
      if (!this.isSubmit) {
        this.tableData.push(this.formData);
        this.formData = {
          achieveSummary: "", // 达成情况描述
          certAttachmentId: 1, //
          firstLevelPoint: "", // 一级指标
          improveMethod: "", // 改进措施
          mainQuestion: "", // 主要问题
          pointDesc: "", // 指标描述
          secondLevelPoint: "" // 二级指标
        };
        this.$nextTick(()=> {
          this.$refs.ossRef.clearFiles()
        })
        this.dialogVisible = false;
      } else {
        this.$http({
          url: this.$http.cert("/pro"),
          method: "put",
          data: this.$http.adornData(
            {
              ...this.formData
            },
            false
          )
        })
          .then(() => {
            this.getCert();
            this.isSubmit = true;
            this.isEdit = false;
            this.$message.success("修改指标成功");
            this.dialogVisible = false;
          })
          .catch(() => {
            this.$message.error("修改指标失败");
          });
      }
    },
    // 提交按钮
    submit() {
      this.$http({
        url: this.$http.cert("/pro"),
        method: "post",
        data: this.$http.adornData(this.tableData, false)
      })
        .then(() => {
          this.getCert();
          this.$emit('getCertStatus')
          this.isSubmit = true;
          this.$message.success("添加指标成功");
          this.dialogVisible = false;
        })
        .catch(() => {
          this.$message.error("添加指标失败");
        });
    },
    // 查看详情
    getCertInfo(id, val) {
      this.isEdit = val;
      this.$http({
        url: this.$http.cert(`/pro/${id}`),
        method: "get"
      }).then(res => {
        this.formData = res.data.data;
        this.$nextTick(()=> {
          this.$refs.ossRef.getUrl(this.formData.certAttachmentId)
        })
        this.dialogVisible = true;
      });
    },
    // 获取该页数据
    getCert() {
      this.$http({
        url: this.$http.cert("/proPage"),
        method: "get",
        params: this.$http.adornParams(
          {
            ...this.page,
            certId: this.$store.state.user.certId
          },
          false
        )
      }).then(res => {
        if (res.data.data.records.length) this.isSubmit = true;
        this.tableData = res.data.data.records;
        this.totalPage = res.data.data.total
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.submitBtn {
  margin-top: 20px;
}
</style>
